<?php
defined('_JEXEC') or die('Restricted access');
$app = JFactory::getApplication();
$input = $app->input;
$action = $input->get('action');
$task = $input->get('task');
$view = $input->get('view');
$itemid = $input->get('Itemid');
$items = $this->get('Items');
$this->pagination = $this->get('pagination');
$AppList =  $this->get('App');
?>

<?php if ($action == 'create'): ?>
<div class="res-title-rg">
    <span class="fl pos-icon text-c"><b class="glyphicon glyphicon-plus"></b></span>
    <div class="title-info">
        <h2 class="fontsize20">Create an Event Funnel</h2>
        <p><a href="#">Home</a>&nbsp;/&nbsp;Setup&nbsp;/&nbsp;Create an Event Funnel</p>
    </div>
</div>
<div class="ws-content pdall15">
	<div style="width:600px;margin:auto">
		<div style="padding:32px 0 4px 0;text-align:right;font-size:18px;border-bottom:solid 2px #000">Event Funnel Form</div>
		<div style="height:32px"></div>
	    <form method="post" class="form-horizontal J_ajaxFsorm" action="/index.php?option=com_console&Itemid=127&task=<?php echo $task; ?>&action=store">
	    	<div class="form-group">
	    		<label for="app_id" class="col-sm-2 control-label">Application</label>
	    		<div class="col-sm-10">
		    		<select class="form-control" id="app_id" name="app_id">
	                <?php foreach ($AppList as $key => $value): ?>
              			<option value="<?php echo $value->id ?>"><?php echo $value->name ?></option>
             		<?php endforeach ?>
	                </select>
	            </div>
	    	</div>
	        <div class="form-group">
	            <label for="name" class="col-sm-2 control-label">Name</label>
	            <div class="col-sm-10">
	            	<input type="text" class="form-control" id="name" name="name" placeholder="Funnel name">
	            </div>
	        </div>
	        <div class="form-group">
	            <label for="funnel" class="col-sm-2 control-label">Funnel steps</label>
	            <div class="col-sm-10">
	            	<div class="panel panel-default">
  						<div class="panel-body">
	            			<div id="funnel_item"></div>
  						</div>
  						<div class="panel-footer">
  							<select class="form-control" id="events">
            				</select>
  						</div>
					</div>
	            </div>
	        </div>
	        <div class="form-group">
	        	<div class="col-sm-offset-2 col-sm-10">
	        		<button type="submit" class="btn btn-default J_ajax_submit_btn">Create</button>
	        	</div>
	        </div>
	    </form>
	</div>
</div>
<script type="text/javascript">
	$(function() {
    	$('#app_id').change(function() {
        	$('#funnel_item').empty();
            var app_id = $(this).val();
            var temp_html = '<option value="">Add an event</option>';
            if (app_id > 0) {
            	$.getJSON('/index.php?option=com_console&Itemid=127&task=<?php echo $task; ?>&action=ajax_event&app_id=' + app_id, function(json) {
                	$.each(json,function(i,data){
                    	temp_html += "<option value='" + data.event_id + "'>" + data.event_name + "</option>";
                    });
                    $('#events').html(temp_html);
                });
            }
        });

        $('#events').change(function () {
        	var event_html = '';
            var event_id = $(this).val();
            var event_name = $(this).find("option:selected").text();
            if (event_id) {
            	$(this).find('option:selected').remove();
                event_html = '<p><input type="hidden" name="item[]" value="'
                    + event_id
                    + '"><button type="button" data-title="'
                    + event_name
                    + '" class="btn btn-default remove_item">'
                    + event_name
                    + ' - Click to remove</button></p>';
                $('#funnel_item').append(event_html);
            }
        });
        
        $(document).on("click", ".remove_item", function () {
        	var event_name = $(this).data('title');
            var event_id = $(this).prev().val();
            $('#events').append("<option value='" + event_id + "'>" + event_name + "</option>");
            $(this).parent().remove();
        });

        $("#app_id").trigger('change');
    });
</script>
<?php elseif ($action == 'edit'): ?>
<?php
$model = $this->getModel();
$funnelId = (int) $input->get('id');
$Item = $model->getItem($funnelId);
$funnelItems = $model->getFunnelItem($funnelId, $Item->app_id);
$funnels = json_encode($funnelItems);
$notids = array_column(json_decode($funnels,1),'event_id');
$notidstr = '"' . implode('","', $notids) . '"';
$events = $model->getEvents($Item->app_id, $notidstr);
$funnelApp = $model->getAppOfFunnel($funnelId);
?>
<div class="res-title-rg">
    <span class="fl pos-icon text-c"><b class="glyphicon glyphicon-plus"></b></span>
    <div class="title-info">
        <h2 class="fontsize20">Edit funnel</h2>
        <p><a href="#">Home</a>&nbsp;/&nbsp;Setup&nbsp;/&nbsp;Edit funnel</p>
    </div>
</div>

<div class="ws-content pdall15">
	<div style="width:600px;margin:auto">
		<div style="padding:32px 0 4px 0;text-align:right;font-size:18px;border-bottom:solid 2px #000">Event Funnel Form</div>
		<div style="height:32px"></div>
	    <form method="post" class="form-horizontal J_ajaxFsorm" action="/index.php?option=com_console&Itemid=127&task=<?php echo $task; ?>&action=update">
			<input type="hidden" name="id" value="<?php echo $Item->id;?>">
	    	<div class="form-group">
	    		<label for="app_id" class="col-sm-2 control-label">Application</label>
	    		<div class="col-sm-10">
		    		<select class="form-control" id="app_id" name="app_id" disabled="disabled">
	                <?php foreach ($AppList as $key => $value): ?>
              			<option value="<?php echo $value->id ?>"
              			<?php if($value->id == $funnelApp->id):?>
              				selected
              			<?php endif ?>
              			><?php echo $value->name ?></option>
             		<?php endforeach ?>
	                </select>
	            </div>
	    	</div>
	        <div class="form-group">
	            <label for="name" class="col-sm-2 control-label">Name</label>
	            <div class="col-sm-10">
	            	<input type="text" class="form-control" id="name" name="name" value="<?php echo $Item->name;?>" placeholder="Funnel name">
	            </div>
	        </div>
	        <div class="form-group">
	            <label for="funnel" class="col-sm-2 control-label">Funnel steps</label>
	            <div class="col-sm-10">
	            	<div class="panel panel-default">
  						<div class="panel-body">
	            			<div id="funnel_item">
	            			<?php foreach($funnelItems as $k => $v):?>
                				<p>
                					<input type="hidden" name="item[]" value="<?php echo $v->event_id?>">
                					<button type="button" data-title="<?php echo $v->event_name?>" class="btn btn-default remove_item"><?php echo $v->event_name?> - Click to remove</button>
                				</p>
                			<?php endforeach;?>
	            			</div>
  						</div>
  						<div class="panel-footer">
  							<select class="form-control" id="events">
  								<option value="">Add an event</option>
                			<?php foreach($events as $event):?>
                    			<option value="<?php echo $event->event_id?>"><?php echo $event->event_name?></option>
                			<?php endforeach;?>
            				</select>
  						</div>
					</div>
	            </div>
	        </div>
	        <div class="form-group">
	        	<div class="col-sm-offset-2 col-sm-10">
	        		<button type="submit" class="btn btn-default J_ajax_submit_btn">Update</button>&nbsp;&nbsp;&nbsp;&nbsp;
	        		<a  class="btn btn-danger layer_confirm" title="are you sure?" href="/index.php?option=com_console&Itemid=127&task=<?php echo $task; ?>&action=delete&id=<?php echo $Item->id?>">Delete</a>
	        	</div>
	        </div>
	    </form>
	</div>
</div>
<script type="text/javascript">
	$(function() {
    	$('#events').change(function () {
        	var event_html = '';
            var event_id = $(this).val();
            var event_name = $(this).find("option:selected").text();
            if (event_id) {
            	$(this).find('option:selected').remove();
                event_html = '<p><input type="hidden" name="item[]" value="'
                    + event_id
                    + '"><button type="button" data-title="'
                    + event_name
                    + '" class="btn btn-default remove_item">'
                    + event_name
                    + ' - Click to remove</button></p>';
                $('#funnel_item').append(event_html);
            }
		});

		$(document).on("click", ".remove_item", function () {
        	var event_name = $(this).data('title');
            var event_id = $(this).prev().val();
            $('#events').append("<option value='" + event_id + "'>" + event_name + "</option>");
            $(this).parent().remove();
        });
    });
</script>
<?php else: ?>
<div class="res-title-rg">
    <span class="fl pos-icon text-c"><i class="setup"></i></span>
    <div class="title-info">
        <h2 class="fontsize20">Event Funnels</h2>
        <p><a href="#">Home</a>&nbsp;/&nbsp;Setup&nbsp;/&nbsp;Event Funnels</p>
    </div>
</div>
<div class="ws-content pdall15">
  <div class="camtab">
    <a href="/index.php?option=com_console&view=<?php echo $task; ?>&Itemid=127&task=<?php echo $task; ?>&action=create" class="fr btn-popup fontsize16">+&nbsp;Create an Event Funnel</a>
  </div>
	<form action="<?php echo htmlspecialchars(JUri::getInstance()->toString()); ?>" method="post" name="adminForm" id="adminForm">
		<div style="padding:8px">
 			<table class="table table-hover">
             	<thead>
             		<tr>
             			<th>Funnel Name</th> 
             			<th>Application</th>
             		</tr>
             	</thead>
             	<tbody>
             		<?php if ($items) :?>
             		<?php foreach ($items as $key => $item): ?>
              		<tr>
                  		<td>
                  			<a href="/index.php?option=com_console&view=<?php echo $view; ?>&Itemid=127&task=<?php echo $task; ?>&action=edit&id=<?php echo $item->id?>"><?php echo $item->name ?></a>
                  		</td>
                  		<td><?php echo $item->appname ?></td>
           			</tr>
               		<?php endforeach ?>
               		<?php endif;?>
               </tbody>
         	</table>
			<div class="pagination">
				<?php echo $this->pagination->getPagesLinks(); ?>
			</div>
		</div>
    </form>
</div>

<?php endif;?>
